import React, { useRef, useEffect, useState, CSSProperties, FC } from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';
// import { getTop, getLeft } from '../slider/util';
import './index.less';

export interface dropDownTypeProps {
  className?: string;
  style?: CSSProperties;
}

const dropDown: FC<dropDownTypeProps> = props => {
  const { children } = props;
  const dropdownButtonDom = useRef(document.createElement('div'));

  const [offset, setOffset] = useState<{
    dropDownLeft?: number;
    dropDownTop?: number;
  }>({});
  const [visible, setVisible] = useState(false);

  // 获取位置信息，方便定位
  useEffect(() => {
    setTimeout(() => {
      const clientRect = dropdownButtonDom.current.getBoundingClientRect();
      const dropDownLeft = clientRect.left;
      const dropDownTop = clientRect.top + clientRect.height;
      setOffset({ dropDownLeft, dropDownTop });
    }, 10);
  }, [dropdownButtonDom.current]);

  //  在 React 中对元素 / 组件添加  onMouseEnter onMouseLeave   即可完成鼠标移入移出事件。
  return (
    <span
      onMouseEnter={() => {
        setVisible(true);
      }}
      onMouseLeave={() => {
        setVisible(false);
      }}
    >
      <span ref={dropdownButtonDom}>{children}</span>
      {ReactDOM.createPortal(
        <div style={{ position: 'absolute', top: 0, left: 0, width: '100%' }}>
          <CSSTransition in={visible} timeout={400} classNames="dropDown">
            <div
              className={classNames(
                'ant-dropdown ant-dropdown-show-arrow ant-dropdown-placement-bottomLeft',
                {
                  'ant-dropdown-hidden': !visible,
                },
              )}
              style={{
                minWidth: 88,
                left: offset.dropDownLeft,
                top: offset.dropDownTop,
              }}
            >
              <div className="ant-dropdown-arrow"></div>
              <ul
                className="ant-dropdown-menu ant-dropdown-menu-light ant-dropdown-menu-root ant-dropdown-menu-vertical"
                // direction="ltr"
                role="menu"
                // tabIndex="0"
              >
                <li
                  className="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
                  role="menuitem"
                >
                  <a
                    target="_blank"
                    rel="noopener noreferrer"
                    href="http://www.alipay.com/"
                  >
                    1st menu item
                  </a>
                </li>
                <li
                  className="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
                  role="menuitem"
                >
                  <a
                    target="_blank"
                    rel="noopener noreferrer"
                    href="http://www.taobao.com/"
                  >
                    2nd menu item
                  </a>
                </li>
              </ul>
            </div>
          </CSSTransition>
        </div>,
        document.body,
      )}
    </span>
  );
};

export default dropDown;
